<template>
  <div class="login-container">
    <!-- logo区域 -->
   <div class="logo">
    <div class="icon"></div>
    <img src="@/assets/common/login.svg" width="300" alt="">
    <p>中后台管理系统</p>
   </div>

   <!-- 表单区域 -->
   <div class="form">
    <h3>人力资源管理平台</h3>
    <a-card class="login-card">
       <!-- 放置登录表单 -->
        <!-- autocomplete不自动填充表单 -->
        <!-- 监听表单form的finish事件，当校验通过，会触发绑定该事件的方法 -->
        <a-form :model="loginForm" autocomplete="off" @finish="onFinish">
          <a-form-item name="mobile">
            <a-input size="large" v-model:value="loginForm.mobile"></a-input>
          </a-form-item>
          <a-form-item name="password">
            <a-input-password size="large"  v-model:value="loginForm.password"></a-input-password>
          </a-form-item>
          <a-form-item :rules="[{validator:validatorAgree}]" name="isAgree">
            <a-checkbox v-model:checked="loginForm.isAgree">用户平台使用协议</a-checkbox>
          </a-form-item>
          <a-form-item>
            <!-- block是是按钮宽度与a-form-item的宽度一样 -->
            <!-- htmlType="submit" 设置button的原生的type值 -->
            <a-button size="large" type="primary" block htmlType="submit">登录</a-button>
          </a-form-item>
        </a-form>
    </a-card>
   </div>
  </div>
</template>

<script setup>
// 实现表单的校验
// 1.声明响应式数据
import {reactive} from 'vue'
import { useRouter } from 'vue-router';  // 引入方法
import { login } from '@/api/login'
import useToken from '@/stores/token'
const router = useRouter() // 得到一个router实例
// useRouter需要放置在最上层-初始化的关系


const loginForm = reactive({
  mobile: '13800000002', // 这是我们的系统默认账号- 目的是让各位直接可以登录
  password: '123456',
  isAgree: false
})

const onFinish = async (values)=> {
  // console.log(values) // {mobile: '13800000002', password: '123456'}
  const {updateToken} = useToken()
  // values 是校验表单的数据
  const data = await login(values) // await是会等到 后面的promise resolve
  // console.log(data) login api接口 data返回的就是token
  updateToken(data) // 更新pinia里面的token
  router.push('/') // 登录成功 跳转首页
}

// 自定义校验规则 rule是当前的规则 value是当前的值
const validatorAgree = (rule,value) => {
  // 判断value是不是true 如果不是true就报错
  return value ? Promise.resolve() : Promise.reject(new Error('您必须同意用户协议'))
}
</script>

<style lang="less">
  .login-container {
    display: flex;
    align-items: stretch;
    height: 100vh;
    .logo {
      flex: 3;
      background: rgba(38, 72, 176) url(../../assets/common/logBg.png) no-repeat center / cover;
      border-top-right-radius: 60px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      padding: 0 100px;
      .icon {
        background: url(../../assets/common/logo.png) no-repeat 70px center / contain;
        width: 300px;
        height: 50px;
        margin-bottom: 50px;
      }
      p {
        color: #fff;
        font-size: 18px;
        margin-top: 20px;
        width: 300px;
        text-align: center;
      }
    }
    .form {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 50px;
      .ant-card {
        width: 320px;
        border: none;
        padding: 0;
      }
      h3 {
        padding-left: 30px;
        font-size: 24px;
      }
    }
  }
  </style>